import React ,{useState} from 'react'
import { ProductCard,DropdownMenu } from 'react-vant';
import {ShoppingCartO} from "@react-vant/icons"
import * as api from "../api/index"
import {useDispatch} from "react-redux"
import withRouter from '../utils/withRouter';

const option = [
    { text: '鱼', value: '鱼' },
    { text: '鲜花', value: '鲜花' },
    { text: '蔬菜', value: '蔬菜' },
];

const option1 = [
    { text: '从高到低', value: '从高到低' },
    { text: '从低到高', value: '从低到高' },
]

function My_content({childrenData,router}) {
    const dispatch = useDispatch()
    const [value, setValue] = useState({});
    
    const setMenu = (v) =>{
        setValue(v)
        dispatch(api.filter_childrenData(v))
    }

    const set_sort = (v) =>{
        setValue(v)
        dispatch(api.sort_children(v))
    }

    const goto_details = (item) => {
        console.log(item,"111");
        // 跳路由 + 路由传惨
        router.navigate("/details/"+ item.id,{state:item,replace:true})
    }

    const add_shopcar = (item,e) =>{
        // 处理事件冒泡
        e.stopPropagation()
        console.log(item);
        dispatch(api.add_shopCar(item.id))
      
    }
    return (
        <div className='content'>
            <div style={{display:"flex",justifyContent:"space-around"}}>
                <DropdownMenu  value={value} onChange={setMenu }>
                    <DropdownMenu.Item placeholder='筛选' name="value" options={option} />
                </DropdownMenu>
                <DropdownMenu  value={value} onChange={set_sort }>
                    <DropdownMenu.Item placeholder='排序' name="value" options={option1} />
                </DropdownMenu>
            </div>
        
            {
                childrenData&&childrenData.length>0? childrenData.map((item,index)=>{
                    return  <ProductCard
                    onClick={()=>goto_details(item)}
                    key={index}
                    price={item.price}
                    desc={item.type}
                    title={item.title}
                    thumb={item.img}
                    tags={
                        <>
                            <ShoppingCartO onClick={(e)=>add_shopcar(item,e)} fontSize={25}  color={"green"}/>
                        </>
                    }
                />
                }):"暂无数据"
            }
            
        </div>
    )
}


export default withRouter(My_content)